<template>
  <div>
    <br>
    <van-nav-bar
        title="车辆管理"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
    />
    <van-cell-group v-for="item in vehicles" :key="item.id">
      <van-card
          desc=""
          :title="item.name"
          thumb="https://hh666.oss-cn-beijing.aliyuncs.com/ffb5bb8fa0fffa31a5a9fb05a0beaffb.jpeg"
          @click=""
      >
        <template #tags>
          <van-tag plain type="danger">{{ item.color }}</van-tag>
          <van-tag plain type="danger">{{ item.brand }}</van-tag>
          <van-tag plain type="danger">{{ item.type }}</van-tag>
        </template>

        <template #footer>
          <van-button icon="delete-o" size="small" @click="deleteVehicle(item.id)">删除</van-button>
        </template>
      </van-card>
    </van-cell-group>
    <van-button round block type="info" @click="addVehicle">新增车辆</van-button>
    <van-popup v-model="show" style="width: 300px;">
      <van-form @submit="onSubmit">
        <van-field
            v-model="name"
            name="车牌号"
            label="车牌号"
            placeholder="车牌号"
            :rules="[{ required: true, message: '请填写车牌号' }]"
        />
        <van-field
            v-model="color"
            name="颜色"
            label="颜色"
            placeholder="颜色"
            :rules="[{ required: true, message: '请填写颜色' }]"
        />
        <van-field
            v-model="brand"
            name="车辆品牌"
            label="车辆品牌"
            placeholder="车辆品牌"
            :rules="[{ required: true, message: '请填写车辆品牌' }]"

        />
        <van-field
            v-model="type"
            name="车辆类型"
            label="车辆类型"
            placeholder="车辆类型"
            :rules="[{ required: true, message: '请填写车辆类型' }]"
        />

        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      color: '',
      brand: '',
      type: '',
      show: false,
      vehicles: [],
      from: {},
    }
  },
  methods: {
    deleteVehicle(id) {
      this.axios.delete(`http://1.94.221.254:9999/api/qcfw-home/home/vehicles/delete/${id}`).then(res => {
        if (res.data.code == 200) {
          this.$toast.success('删除车辆成功')
          this.findAll()
        } else {
          this.$toast.fail('删除车辆失败')
        }
      })
    },
    onSubmit(values) {
      this.from.name = values.车牌号
      this.from.color = values.颜色
      this.from.brand = values.车辆品牌
      this.from.type = values.车辆类型
      var a = false;
      console.log(this.from)
      this.vehicles.forEach(item => {
        if (item.name == this.from.name) {
          this.$toast.fail('车牌号已存在')
          a = true;
        }
      })
      if (a == false){
        this.axios.post(`http://1.94.221.254:9999/api/qcfw-home/home/vehicles/add`, this.from).then(res => {
          if (res.data.code == 200) {
            this.$toast.success('新增车辆成功')
            this.show = false
            this.findAll()
          } else {
            this.$toast.fail('新增车辆失败')
          }
        })
      }
    },
    addVehicle() {
      this.show = true
    }
    ,
    findAll() {
      this.axios.get(`http://1.94.221.254:9999/api/qcfw-home/home/vehicles/findAll`).then(res => {
        this.vehicles = res.data.data
      })
    },
    onClickLeft() {
      this.$router.push('/shouye')
    },
  },
  created() {
    this.findAll()
    var token = localStorage.getItem('token');
    if (token === null) {
      this.$router.push('/');
    }

  }
}
</script>

<style scoped>

</style>
